<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb class="mb-1" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 表格 -->
    <el-table
      :data="goodlistdata.goods"
      :highlight-current-row="true"
      stripe
      border
      style="width: 100%"
    >
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="goods_name" label="商品名称" width="680">
      </el-table-column>
      <el-table-column prop="goods_price" label="商品价格" width="">
      </el-table-column>
      <el-table-column prop="goods_weight" label="重量"> </el-table-column>
      <el-table-column label="创建时间"> 1970-01-18 20:39:05 </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @current-change="handleCurrentChange" class="mt-2" background layout="prev, pager, next" :total="goodlistdata.total">
    </el-pagination>
  </div>
</template>

<script>
import { goods } from "@/utils/api";
import { reactive } from "@vue/reactivity";
import { ElMessage } from "element-plus";
import moment from "moment";
export default {
  setup() {
    const goodslist = reactive({
      query: "",
      pagenum: 1,
      pagesize: 10,
    });
    const goodlistdata = reactive({
      goods: [],
      pagenum: "",
      total: 0,
      create_time: "1970-01-18 20:39:05",
    });
    const getgoods = async () => {
      const { data: res } = await goods(goodslist);
      console.log(res.data);
      if (res.meta.status !== 200) {
        return ElMessage.error({
          message: "数据加载失败...",
        });
      }
      (goodlistdata.goods = res.data.goods),
        (goodlistdata.pagenum = res.data.pagenum),
        (goodlistdata.total = res.data.total);
    };
    getgoods();
    const handleCurrentChange = (val) => {
      goodslist.pagenum = val
      getgoods();
    }
    return {
      goodlistdata,
      handleCurrentChange
    };
  },
};
</script> 

<style scoped>
.el-table {
  cursor: pointer;
}
</style>